import React from 'react'
import injectSheet from 'react-jss'
import styles from '@/page/Login/styles'
import classNames from 'classnames'
import { Card, Button, Form, Icon, Input, } from 'antd'

const FormItem = Form.Item

class Login extends React.Component {
  state = {
    type: 'login', // ['login', 'register'] 登陆or注册
    codeStatus: true, // [true, false] 二维码出现状态
  }

  // 改变类型
  changeType(type) {
    this.setState({
      type,
    })
  }

  // 显示二维码
  showCode() {
    this.setState({
      codeStatus: !this.state.codeStatus,
    })
  }

  render() {
    const { classes, } = this.props
    let QRImage = classNames({
      [classes.QRImage]: true,
      'QRImageHidden': this.state.codeStatus,
    })
    return (
      <div className={classes.LoginWrapper}>
        <main className={classes.LoginContent}>
          <Card className={classes.LoginBox}>
            <div className={classes.LoginBoxHeader}>
              <i className={`iconfont icon-wendang ${classes.LoginLogo}`}></i>
              <div className={classes.LoginBoxHeaderSlogen}>
                Stay Hungry Stay Foolish
              </div>
            </div>
            <div className={classes.LoginBoxInner}>
              {
                this.state.type === 'login'
                  ? <div className={classes.LoginBoxContent}>
                      <Form className={classes.LoginForm}>
                        <FormItem>
                          <Input
                            prefix={<Icon type="user" className={classes.LoginFormIcon} />}
                            placeholder="用户名" />
                        </FormItem>
                        <FormItem>
                          <Input
                            prefix={<Icon type="lock" className={classes.LoginFormIcon} />}
                            placeholder="密码" />
                        </FormItem>
                        <FormItem>
                          <Button className={classes.LoginFormButton} size="large">登录</Button>
                        </FormItem>
                      </Form>
                    </div>
                  : <div className={classes.RegisterBoxContent}>
                      <Form className={classes.RegisterForm}>
                        <FormItem>
                          <Input
                            prefix={<Icon type="user" className={classes.LoginFormIcon} />}
                            placeholder="用户名" />
                        </FormItem>
                        <FormItem>
                          <Input
                            prefix={<Icon type="lock" className={classes.LoginFormIcon} />}
                            placeholder="密码" />
                        </FormItem>
                        <FormItem>
                          <Button className={classes.RegisterFormButton} size="large">注册</Button>
                        </FormItem>
                      </Form>
                    </div>
              }
              {
                this.state.type === 'login'
                  ? <div className={classes.LoginBoxSwitch}>没有帐号？<span onClick={() => this.changeType('register')}>注册</span></div>
                  : <div className={classes.LoginBoxSwitch}>已有帐号？<span onClick={() => this.changeType('login')}>登录</span></div>
              }
              <div className={QRImage}>
                <div className={`iconfont icon-qrcode`}></div>
              </div>
            </div>
          </Card>
          <Button className={classes.DownloadBtn} onClick={() => this.showCode()}>下载APP应用</Button>
        </main>
        <footer className={classes.Footer}>MS Blog ©2018 Created by Defore</footer>
      </div>
    )
  }
}

export default injectSheet(styles)(Login)
